<template>
	<view class="warp">
		<uni-nav-bar  height="88rpx" :statusBar="true">
			<!-- <uni-icons  @click="backfn" style="margin-right: 20rpx;" class="input-uni-icon" type="back" size="24" color="#282828" />
				<view class="input-view">
										<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
										<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
											@focus="tosearch" />
					</view> -->
			 
		</uni-nav-bar>
		<view style="text-align: center;padding: 0 50rpx;background-color: #fff;height: 44px;">
			<view class="input-view" @click="tosearch">
									<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
									<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
										 />
				</view>
		</view>
		
		<!-- 轮播图 -->
		<view class="uni-margin-wrap" v-if="webinfo.bannerList.length>0">
					<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration">
						<swiper-item v-for="(item,index) in webinfo.bannerList">
						<view class="swiper-item uni-bg-red" style="background-color: red;">
							<image style="width: 100%;" :src="item.websiteImage" mode="widthFix"></image>
						</view>
						</swiper-item>
						
					</swiper>
		</view>
		<!-- 导航栏 -->
		<view class="navigation">
			<view class="n_list">
				<view class="n_item" @click="tointroduce">
					<view class="n_image">
						<image style="width: 80rpx; height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/xiehui.png" mode=""></image>
					</view>
					<view class="n_text">
						协会介绍
					</view>
				</view>
				<view class="n_item" @click="tomember">
					<view class="n_image">
						<image style="width: 80rpx; height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/shenqing.png" mode=""></image>
					</view>
					<view class="n_text">
						入会申请
					</view>
				</view>
				<view class="n_item" @click="topartybuild">
					<view class="n_image">
						<image style="width: 80rpx; height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/zhongdahuodong.png" mode=""></image>
					</view>
					<view class="n_text">
						党建学习
					</view>
				</view>
				<view class="n_item" @click="tostaduy">
					<view class="n_image">
						<image style="width: 80rpx; height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/xuexi.png" mode=""></image>
					</view>
					<view class="n_text">
						地坪学院
					</view>
				</view>
				<view class="n_item" @click="todongtai">
					<view class="n_image">
						<image style="width: 80rpx; height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/dongtai.png" mode=""></image>
					</view>
					<view class="n_text">
						协会动态
					</view>
				</view>
				<view class="n_item" @click="tozhaoshang">
					<view class="n_image">
						<image style="width: 80rpx; height: 80rpx;" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/zhaoshang.png" mode=""></image>
					</view>
					<view class="n_text">
						招商专栏
					</view>
				</view>
			</view>
		</view>
		<!-- 协会介绍 -->
		<view class="association_introduction" v-if="webinfo.associationList[0]">
			<view class="p_title">
				<view class="pt_center">
					协会介绍
				</view>
				<view class="pt_more" @click="tointroduce">
					更多
				</view>
			</view>
			<view class="ai_image" v-if="webinfo.associationList[0].websiteImage">
				<image style="width: 100%;height: 200rpx;" :src="webinfo.associationList[0].websiteImage" mode=""></image>
			</view>
			<view class="text"v-if="webinfo.associationList[0].websiteContent">
			<span style="margin-right: 40rpx;"></span>
			<span style="overflow: hidden; text-overflow: ellipsis;display: -webkit-box; -webkit-box-orient: vertical;-webkit-line-clamp:3;"  >
				{{delHtmlTag(webinfo.associationList[0].websiteContent)}}
			</span>
			</view>
		</view>
		<!-- 常任理事单位 -->
		<view class="permanent" v-if="webinfo.standingCommitteeList.length>0">
			<view class="p_title">
				<view class="pt_center">
					理事单位
				</view>
				<view class="pt_more" @click="topermanent">
					更多
				</view>
			</view>
			<view class="m_list"  >
				<view class="" style="overflow: auto;  display: -webkit-flex;  display: flex;">
					<view @click="towebinfo(item)" class="m_item" v-for="(item,index) in webinfo.standingCommitteeList">
						<view class="image">
							<image style="width: 320rpx;height: 200rpx;" :src="item.websiteImage" mode="heightFix"></image>
						</view>
						<view class="name">
							{{item.websiteTitle}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 核心成员 -->
		<view class="core_members" v-if="webinfo.memberList.length>0">
			<view class="p_title">
				<view class="pt_center">
					核心成员
				</view>
				<view class="pt_more" @click="toCoremembers">
					更多
				</view>
			</view>
			<view v-if="webinfo.memberList.length>0" class="cm_list" >
				<view class="u-demo-block swiper-t">
				<u-swiper
				   :list="webinfo.memberList"
				   name="websiteImage"
				   circular
					:effect3d="true"
				   :autoplay="false"
					:height="480"
					  previousMargin="80"
					   nextMargin="30"
				   bgColor="rgba(255,255,255,255)"
				   :inset="true"
				   :title="true"
				   mode="none" 
				   @click="tocompanyinfo"
				    ></u-swiper>
				</view>
			</view>
		</view>
		<!-- 
		style="overflow: auto;  display: -webkit-flex;  display: flex;"
		 <view class="cm_item" v-for="(item,index) in webinfo.memberList" :key="index">
		 	<view class="image">
		 		<image style="width: 210rpx;height: 240rpx;border-radius: 10rpx;" :src="item.websiteImage" mode="aspectFill"></image>
		 	</view>
		 	<view class="name">
		 		{{item.websiteTitle}}
		 	</view>
		 	<view class="text_introdu"  >
		 		 {{delHtmlTag(item.websiteContent)}}
		 	</view>
		 </view>
		 -->
		<!-- 会员风采 -->
		<view class="Membershipstyle" v-if="webinfo.memberStyleList.length>0">
			<view class="p_title">
				<view class="pt_center">
					会员风采
				</view>
				<view class="pt_more" @click="tomenberships">
					更多
				</view>
			</view>
			<view class="m_list"  >
				<view class="" style="overflow: auto;  display: -webkit-flex;  display: flex;">
					<view class="m_item" v-for="(item,index) in webinfo.memberStyleList">
						<view class="image">
						<image style="width: 200rpx;height: 300rpx;" :src="item.websiteImage" mode="heightFix"></image>
						</view>
						<view class="name">
							{{item.websiteTitle}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 年度优秀单位 -->
		<view class="Excellentunit" v-if="webinfo.unitList.length>0">
			<view class="p_title">
				<view class="pt_center">
					年度优秀单位
				</view>
				<view class="pt_more" @click="toxcellent">
					更多
				</view>
			</view>
			<view class="m_list"  >
				<view class="" style="overflow: auto;  display: -webkit-flex;  display: flex;">
					<view class="m_item" v-for="(item,index) in webinfo.unitList">
						<view class="image">
							<image style="width: 320rpx;height: 200rpx;" :src="item.websiteImage" mode="heightFix"></image>
						</view>
						<view class="name">
							{{item.websiteTitle}}
						</view>
					</view>
				</view>
			</view>
		</view>
	
		<!-- 重大活动 -->
		<!-- <view @click="toactivity" class="Promotional" v-if="webinfo.activityList.length>0">
			<view class="p_title">
				<view class="pt_center">
					最新活动
				</view>
				<view class="pt_more">
					更多
				</view>
			</view>
			<view class="content">
				<view class="c_list">
					<view class="c_item" v-if="webinfo.activityList[0]">
						<view class="ci_image">
							<image style="width: 316rpx;height: 220rpx;" :src="webinfo.activityList[0].websiteImage" mode="aspectFill"></image>
						</view>
						<view class="ci_goodname">
							{{webinfo.activityList[0].websiteTitle}}
						</view>
						 
						<view class="state">
							进行中
						</view>
					</view>
					<view class="c_item" v-if="webinfo.activityList[1]">
						<view class="ci_image">
							<image style="width: 316rpx;height: 220rpx;" :src="webinfo.activityList[1].websiteImage" mode="aspectFill"></image>
						</view>
						<view class="ci_goodname">
							{{webinfo.activityList[1].websiteTitle}}
						</view>
						 
						<view class="state">
							进行中
						</view>
					</view>
				</view>
				<view class="con_b" v-if="webinfo.activityList[2]">
					<view class="con_image">
						<image style="700rpx;height: 200rpx;" :src="webinfo.activityList[2].websiteImage" mode=""></image>
					</view>
					<view class="con_text">
						{{webinfo.activityList[2].websiteTitle}}
					</view>
				</view>
			</view>
		</view> -->
	
		<!-- 专家团队 -->
		<view class="expert_team" v-if="webinfo.expertList.length>0">
			<view class="p_title">
				<view class="pt_center">
					专家团队
				</view>
				<view class="pt_more" @click="toexperteam">
					更多
				</view>
			</view>
			<view class="et_list" v-if="webinfo.expertList.length>0">
			<view class="" style="overflow: auto;  display: -webkit-flex;  display: flex;">
				<view class="et_item" v-for="(item,index) in webinfo.expertList" :key="index">
					<view class="image">
						<image style="width: 320rpx;height: 300rpx;" :src="item.websiteImage" mode="heightFix"></image>
					</view>
					<view class="text">
						<view class="text_name">
							{{item.websiteTitle}}
						</view>
						<view class="text_introdu" v-html="item.websiteContent">
							 
						</view>
					</view>
				</view>
			</view>
				
			</view>
		</view>
	
		
		<!-- 学习中心 -->
		<view @click="tostaduy" class="staduycenter" v-if="webinfo.studyList.length>0">
			<view class="p_title">
				<view class="pt_center">
					地坪学院
				</view>
				<view class="pt_more" >
					更多
				</view>
			</view>
			<view class="staduy_list" v-if="webinfo.studyList.length>0">
				<view class="sl_item" >
					<view class="si_left">
						<view class="title">
							{{webinfo.studyList[0].websiteTitle}}
						</view>
						<view class="text">
								<span style="margin-right: 40rpx;"></span>
								<span v-html="webinfo.studyList[0].websiteContent"></span>
							 <!-- <video  style="width: 320rpx;height: 200rpx;" :src="webinfo.studyList[0].websiteImage"></video> -->
						</view>
						<view class="time">
							{{webinfo.studyList[0].createTime}}
						</view>
					</view>
					<view class="si_right">
						<view class="image">
							<video  style="width: 320rpx;height: 200rpx;" :src="webinfo.studyList[0].websiteImage"></video>
						</view>
					</view>
				</view>
				<view class="sl_item" v-if="webinfo.studyList[1]">
					<view class="si_left">
						<view class="title">
							{{webinfo.studyList[1].websiteTitle}}
						</view>
						<view class="text">
								<span style="margin-right: 40rpx;"></span>
								<span v-html="webinfo.studyList[1].websiteContent"></span>
							 <!-- <video  style="width: 320rpx;height: 200rpx;" :src="webinfo.studyList[0].websiteImage"></video> -->
						</view>
						<view class="time">
							{{webinfo.studyList[1].createTime}}
						</view>
					</view>
					<view class="si_right">
						<view class="image">
							<video  style="width: 320rpx;height: 200rpx;" :src="webinfo.studyList[1].websiteImage"></video>
						</view>
					</view>
				</view>
			
			</view>
		</view>
		<!-- 赞助商单位 -->
		<view class="sponsor" v-if="webinfo.sponsorList.length>0">
			<view class="p_title">
				<view class="pt_center">
					赞助单位
				</view>
				<view class="pt_more" @click="tosponsort">
					更多
				</view>
			</view>
			<view class="m_list"  >
				<view class="" style="overflow: auto;  display: -webkit-flex;  display: flex;">
					<view @click="towebinfo(item)" class="m_item" v-for="(item,index) in webinfo.sponsorList">
						<view class="image">
							<image style="width: 320rpx;height: 200rpx;" :src="item.websiteImage" mode="heightFix"></image>
						</view>
						<view class="name">
							{{item.websiteTitle}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" style="margin-bottom: 25%;">
			
		</view>
	</view>
</template>

<script>
	import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
	export default {
		name:"home_association",
		data() {
			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				author:1,
				
			};
		},
		props:{
			webinfo:{}
		},
		mounted() {
			// this.getshopweb()
			this.memberlistfn()
		},
		
		methods:{
			backfn(){
			uni.navigateBack({delta:1})	
			},
			// 点击搜索框事件
			tosearch(){
				uni.navigateTo({
					url:"/extra/serachList/serachList"
				})
			},
			// 跳转微官网
			towebinfo(val){
				// uni.reLaunch({
				// 	 url:"/webcont/webindex/webindex?searchId="+val.vendorId
				// })
				if(val.vendorId){
					uni.navigateTo({
						 url:"/webcont/webindex/webindex?searchId="+val.vendorId
							  })
				}else{
					uni.showToast({
						title:'商家暂未入驻,入驻请联系东之策客服:199315362406',
						icon:'none'
					})
				}
				
			},
			
			
			
			
			// 数据处理
			memberlistfn(){
				this.webinfo.memberList.forEach((item,index)=>{
					item.title=item.websiteTitle 
					 
				})
			},
			
			// getshopweb(){
			// 		this.$request({
			// 			url:'v3/website/front/member/all/list',
			// 			method:'GET',
			// 			data:{vendorId:'480019'}
			// 		}).then(res=>{
			// 			this.webinfo=res.data
			// 		})
			// 	},
			// 核心成员跳转官网
			tocompanyinfo(idx){
				if(this.webinfo.memberList[idx].vendorId){
					uni.navigateTo({
						 url:"/webcont/webindex/webindex?searchId="+this.webinfo.memberList[idx].vendorId
							  })
				}else{
					uni.showToast({
						title:'商家暂未入驻,入驻请联系东之策客服:199315362406',
						icon:'none'
					})
				}
				 
			},
				// 协会介绍
				tointroduce(){
					uni.navigateTo({
						url:"/webcont/AssociationIntroduction/AssociationIntroduction"
					})
				},
				// 入会申请
				tomember(){
					uni.navigateTo({
						url:"/webcont/Membershipapplication/Membershipapplication"
					})
				},
			// 重大活动
			toactivity(){
				uni.navigateTo({
					url:"/webcont/acyivity/acyivity"
				})
			},
			// 学习中心
			tostaduy(){
				uni.navigateTo({
					url:"/webcont/staduycenter/staduycenter"
				})
			},
			// 党建学习
			topartybuild(){
				uni.navigateTo({
					url:"/webcont/partybuilding/partybuilding"
				})
			},
			// 协会动态
			todongtai(){
				uni.navigateTo({
					url:"/webcont/AssociationNews/AssociationNews"
				})
			},
			tozhaoshang(){
				uni.navigateTo({
					url:"/webcont/attracinv/attracinv"
				})
			},
			// 优秀单位8
			toxcellent(){
				uni.navigateTo({
					url:"/webcont/excellent/excellent"
				})
			},
			// 理事单位
			topermanent(){
				 uni.navigateTo({
				 	url:"/webcont/parmanentmember/parmanentmember"
				 })
			},
			tosponsort(){
				uni.navigateTo({
					url:"/webcont/sponsor/sponsor"
				})
			},
			// 会员风采9
		tomenberships(){
			uni.navigateTo({
				url:"/webcont/menberships/menberships"
			})
		},
		// 专家团队
		toexperteam(){
			uni.navigateTo({
				url:"/webcont/Expertteam/Expertteam"
			})
		},
		//核心成员
		toCoremembers(){
			uni.navigateTo({
				url:"/webcont/Coremembers/Coremembers"
			})
		},
		// 去除标签
		delHtmlTag (str) {
		  return str.replace(/<[^>]+>/g, '')
		}
			
		}
	}
</script>

<style lang="scss" scoped>
	$nav-height: 30px;
.warp{
	position: relative;
	/deep/.uni-navbar__header[data-v-4afea59e] {
		height: 88rpx !important;
	}
	.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			text-align: center;
			width: 650rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}
	
		.input-uni-icon {
			line-height: $nav-height;
		}
	
		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 580rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
	
	
	.uni-margin-wrap {
			width: 690rpx;
			width: 100%;
		}
		.swiper {
			height: 300rpx;
		}
		.swiper-item {
			display: block;
			height: 300rpx;
			line-height: 300rpx;
			text-align: center;
		}
		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}
		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}
		.info {
			position: absolute;
			right: 20rpx;
		}
		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
		// 导航栏
		.navigation{
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 20rpx;
			background-color: #fff;
			.n_list{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.n_item{
					display: flex;
					flex-direction: column;
					align-items: center;
					 
					.n_image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						// margin-left: 50rpx;
						// background-color: green;
					}
				}
			}
			
		}
		// 公共
		.sponsor,.permanent,.Excellentunit,.Membershipstyle,.staduycenter,.Promotional,.core_members,.expert_team,.association_introduction{
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 20rpx;
			background-color: #fff;
			.p_title{
			   width: 100%;
			   padding-left: 40%;
				display: flex;
				position: relative;
				.pt_center{
					font-size: 30rpx;
					font-weight: 550;
					padding-bottom: 10rpx;
					border-bottom: 6px solid #ff841f;
				}
				.pt_more{
					position: absolute;
					right: 0;
					color: #c3c3c3;
					text-decoration: underline;
					// border-bottom: 2rpx solid #c3c3c3;
				}
				
			}
		}
		// 优秀单位
		.sponsor,.permanent,.Excellentunit,.Membershipstyle{
			.m_list{
				margin-top: 18rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.m_item{
					width: 320rpx;
					text-align: center;
					padding-bottom: 10rpx;
					margin-left: 16rpx;
					.image{
						// width: 300rpx;
					}
					.name{
						color: #ff841f;
					}
				}
			}
		}
		// 协会介绍
		.association_introduction{
			
						  
			
			.ai_image{
				margin-top: 20rpx;
				width: 100%;
				height: 200rpx;
				background-color: pink;
			}
			.text{
				margin-top: 10rpx;
			}
		}
		// 专家团队
		.expert_team{
			.et_list{
				margin-top: 18rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.et_item{
					width: 320rpx;
					text-align: center;
					padding-bottom: 10rpx;
					margin-left: 16rpx;
					.image{
					
					// height: 200rpx;
					// background-color: palegreen;
					border-radius: 20rpx;
					}
					.text{
						margin: 10rpx;
						.text_name{
							color: #ff841f;
							font: 30rpx;
						}
						.text_introdu{
							font-size: 24rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							white-spce:nowrap
						}
						
					}
				}
			}
		}
		// 核心成员
		.core_members{
			.cm_list{
				margin-top: 20rpx;
				padding-bottom: 20rpx;
				.cm_item{
					width: 30%;
					text-align: center;
					margin-right: 20rpx;
					.image{
						border-radius: 10rpx;
						width: 210rpx;
						height: 240rpx;
						background-color: #ff5500;
						border-radius: 20rpx;
					}
					.name{
						color: #ff841f;
					}
					.text_introdu{
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						-webkit-line-clamp: 2;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						white-spce:nowrap
					}
					
				}
			}
		}
		 
				// bannner 轮播图
				.swiper-t {
					/deep/.u-swiper-image[data-v-a5b2d580] {
					    width: 80% !important;
					    
					}
					/deep/.uni-swiper-item[data-v-7b038a67]{
						width: 80% !important;
					}
					padding-top: 30rpx;
					background-image: #fff;
					// background-image: linear-gradient(#ffae00,#ffd849,#f7f7f7)
					/deep/.uni-swiper-slides{
						left:120px !important;
						right:120px !important;
						
					}
					 
				}
				
				
			 
		// 重大活动
		.Promotional{
			
			.content{
				margin-top: 20rpx;
				.c_list{
					display: flex;
					justify-content: space-between;
					.c_item{
						padding: 10rpx                       ;
					border: 2rpx solid #eeeeee;
					border-radius: 10rpx;
						width:340rpx;
						position: relative;
						.ci_image{
						
							height: 220rpx;
								background-color: red;
						}
						.ci_goodname{
							padding: 10rpx;
							font-size: 24rpx;
							color: #282828;
							height: 46rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 1;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							white-spce:nowrap
						}
						.ci_bottom{
							padding: 10rpx;
							display: flex;
							justify-content: space-between;
							font-size: 24rpx;
						}
						.state{
							position: absolute;
							right: 20rpx;
							top: 24rpx;
							width: 120rpx;
							text-align: center;
							padding: 6rpx 10rpx;
							background-color: #ff841f;
							color: #fff;
							border-radius: 28rpx;
						}
					}
				}
				.con_b{
					margin-top: 20rpx;
					.con_image{
						
						width: 700rpx;
						height: 200rpx;
						background-color: red;
					}
					.con_text{
						 margin-top: 10rpx;
						 font-size: 24rpx;
					}
					
				}
			}
		}
		// 学习中心
		.staduycenter{
			.staduy_list{
				
				margin-top: 20rpx;
				// display: flex;
				// justify-content: space-between;
				.sl_item{
					padding: 10rpx;
					margin-bottom: 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.si_left{
						width: 45%;
						.title{
							font-size: 28rpx;
							font-weight: 550;
							color: #ff841f;
						}
						.text{
							margin-top: 10rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							-webkit-line-clamp: 3;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							white-spce:nowrap
						}
						.time{
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #c3c3c3;
						}
					}
					.si_right{
						width: 40%;
						.image{
							height: 200rpx;
							background-color: greenyellow;
						}
					}
				}
			}
		}
}
</style>